<template>
    <div v-loading="loading" class="addmenu">
        <goTem title="菜单添加"></goTem>
        <el-form  ref="form" :model="form" label-width="80px">
            <el-form-item label="上级栏目">
                <div class="icon">
                    <el-tooltip effect="light" placement="top">
                        <div slot="content" class="contents" style="">
                            <el-tree :data="parentList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                        </div>
                        <el-button>{{ parentidName }}</el-button>
                    </el-tooltip>
                </div>

            </el-form-item>
            <el-form-item label="栏目标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="栏目图标">
                <div class="icon">
                    <el-tooltip effect="light" placement="right">
                        <div slot="content" class="content" style="">
                            <p v-for="items in iconList" :key="items.id"
                               :class="items.id == iconIndex ? 'iconActive' : '' "
                               @click="ChooseIcon(items)">
                                <span :class="items.icon" style="margin-right: 5px;"></span>
                                <i>{{ Icon(items.icon) }}</i>
                            </p>
                        </div>
                        <el-button><i :class="iconName"></i> {{ iconName }}</el-button>
                    </el-tooltip>
                </div>
            </el-form-item>
            <el-form-item label="栏目目录">
                <el-input v-model="form.app"></el-input>
            </el-form-item>
            <el-form-item label="栏目路径">
                <el-input v-model="form.path"></el-input>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label="">
                <el-button style="width: 100px;" type="primary" @click="GetSubmit()">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "add",
    data() {
        return {
            iconName: "请选择",
            iconIndex: 0,
            loading: false,
            form: {
                title: '',
                icon: '',
                parentid: "",
                app: '',
                path: "",
                status: true
            },
            parentList: [],
            iconList: [],
            parentidName: "请选择",
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },

    mounted() {

        this.GetParentidMenuList()
        this.GetIcon()


    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
            this.form.parentid = data.value
            this.parentidName = data.label
        },
        // 提交
        GetSubmit() {
            let that = this

            let form = that.form

            if (form.title == '') {
                this.$Msg.message("栏目名称不能为空", "error");
                return
            }
            if (form.app == '') {
                this.$Msg.message("栏目目录不能为空", "error");
                return
            }
            if (form.path == '') {
                this.$Msg.message("栏目路径不能为空", "error");
                return
            }
            let status = 0;

            if (form.status == true) {
                status = 1
            } else {
                status = 0
            }
            form.status = status

            that.loading = true

            this.$http.HttpPost("v1/AddMenu", form).then((res) => {

                if (res.code == 0) {
                    this.$Msg.message(res.msg)
                    setTimeout(() => {
                        this.$go.goBack()
                        that.loading = false
                    }, 300)

                }else{
                    this.$Msg.message(res.msg, "error");
                    that.loading = false
                }
            })

        },
        ChooseIcon(item) {
            this.iconIndex = item.id
            this.iconName = item.icon
            this.form.icon = this.iconName
        },
        // 图标截取
        Icon(item) {
            return item.slice(3);
        },
        // 上级栏目
        GetParentidMenuList() {
            this.$http.HttpGet("v1/GetParentidMenuList").then((res) => {
                if (res.code == 0) {
                    let data = res.data
                    this.parentList = this.$common.ArrayUtility.Select(data)
                } else {
                    this.$Msg.message(res.msg, "error");
                }
            })
        },
        // 上级栏目
        GetIcon() {
            this.$http.HttpGet("v1/GetIcon").then((res) => {
                if (res.code == 0) {
                    this.iconList = res.data
                } else {
                    this.$Msg.message(res.msg, "error");
                }
            })
        },
        clearForm() {
            this.form.title = ''
            this.form.icon = ''
            this.form.parentid = ""
            this.form.app = ''
            this.form.path = ""
            this.form.status = true
        }
    }

}
</script>

<style scoped>
.content {
    width: 600px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: 200px !important;
    overflow: scroll !important;

}

.contents {
    width: 200px !important;

    height: 200px !important;
    overflow: scroll !important;

}

.content p {
    width: 50%;
    padding-left: 3%;
    height: 30px;
    cursor: pointer;
    width: 30%;
    border: 1px solid transparent;
    font-size: 14px;
    align-items: center;
    display: flex;
    justify-content: left;
    text-align: center

}

.iconActive {
    border: 1px solid #ccc !important;
}
</style>
